<template>
	<!-- 作业图片 -->
	<div class="work-imgs-wrap page">
		<div v-for="(n,i) in picGroupList" :key="i">
			<!-- 页开始 -->
			<div class="page-content">
				<div class="row">
					<form class="form-horizontal">
						<div class="form-group col-xs-8">
							<label class="col-xs-1 control-label"></label>
							<label class="col-xs-11 control-label font-bold text-left cid"></label>
						</div>
						<div v-if="i==0" class="form-group col-xs-12">
							<div class="text-center">
								<h3 class="h3" style="letter-spacing: 2px;">保养作业图片 </h3>
							</div>
						</div>
						<div class="form-group col-xs-12">
							<div>
								<div v-if="i==0" class="table-header">
									<label class="col-xs-5 control-label text-left no-padding">项目名称：{{proname}}</label>
									<label class="col-xs-7 control-label no-padding">项目编号：{{pronum}}</label>
								</div>
								<table id="maintainPlanTable" cellspacing="0" cellpadding="0" border="0">
									<template v-for="(item, index) in n">
										<tr :key="item.id+'_1'">
											<td class="text-center" rowspan="2">{{item.desc}}</td>
											<td class="text-center" style="width:320px;height:220px">
												<img v-if="item.preWorkPicUrl" :src="item.preWorkPicUrl" style="width:100%;height:100%" crossOrigin="anonymous"> <!-- http://res.firefm.cn/FtTbOAUHo338UT_ohvIQsRo6zgDf -->
											</td>
											<td class="text-center" style="width:320px;height:220px">
												<img v-if="item.postWorkPicUrl" :src="item.postWorkPicUrl" style="width:100%;height:100%" crossOrigin="anonymous">
											</td>
											<td v-show="status != 2" class="text-center print-none pic-btns-wrap" rowspan="2">
												<div style="margin-top: 15px;">
													<el-button class="danger-btn" type="danger" @click="deleteData(i*3+index)">删除</el-button>
												</div>
												<div style="margin-top: 15px;">
													<el-button class="primary-btn" type="primary" @click="changePic(item, i*3+index)">更换图片</el-button>
												</div>
											</td>
										</tr>
										<tr :key="item.id+'_2'">
											<td class="text-center">作业前</td>
											<td class="text-center">作业后</td>
										</tr>
									</template>
								</table>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- 页结束 -->
			<div class="page-break"></div>
		</div>
	</div>
</template>
<script>
import { changeWorkPic } from '@/api/maintenanceReport'
export default {
	name: 'WorkImgs-5',
	props: {
		workPic: {
			type: Array,
		},
		status: {},
		proname: {},
		pronum: {},
		startTime: {},
		endTime: {},
	},
	data() {
		return {
			picList: [],
		}
	},
	computed: {
		picGroupList() {
			let arr = []
			let groupNum = Math.ceil(this.picList.length / 3)
			for (var i = 0; i < groupNum; i++) {
				arr.push(this.picList.slice(i * 3, (i + 1) * 3))
			}
			if (arr.length == 0) return [[]]
			return arr
		},
	},
	created() {
		let that = this
		if (that.workPic) {
			that.picList = that.workPic
		}
	},
	methods: {
		deleteData(index) {
			if (index !== undefined && index !== null) {
				this.picList.splice(index, 1)
			}
		},
		// 更换图片
		changePic(obj, index) {
			let that = this
			let parames = {
				startTime: that.startTime,
				endTime: that.endTime,
				id: obj.id,
				detailId: obj.detailId,
				preWorkPicUrl: obj.preWorkPicUrl,
				postWorkPicUrl: obj.postWorkPicUrl,
				type: 5,
			}

			// 打开选择图片弹框
			this.$parent.$parent.openImgDialog(
				parames,
				(newUrl) => {
					that.picList[index].preWorkPicUrl = newUrl
				},
				(newUrl) => {
					that.picList[index].postWorkPicUrl = newUrl
				}
			)
			// changeWorkPic(parames).then(res => {
			//     if(res.status === 200) {
			//         that.picList[index].postWorkPicUrl = res.data.post
			//         that.picList[index].preWorkPicUrl = res.data.pre
			//     }
			// })
		},
		// 获取数据
		getPicData() {
			let that = this

			return that.picList
		},
	},
}
</script>